var CommentList=React.createClass({

render:function(){
var appContent=this.props.data.map(function(content){
return(
<ul className="list-group"> 
<li className="list-group-item">输入的用户名是:{content.username}</li>
<li className="list-group-item">输入的邮箱是:{content.email}</li>
</ul>);
});
return(
   <div className="panel panel-body">{appContent}</div>
)}});

var CommentForm=React.createClass({
render:function(){
return(<form className="form-inline">
  <div className="form-group">
    <label>Name</label>
    <input type="text" className="form-control" id="username" name="username" placeholder="Jane Doe"/>
  </div>
  <div className="form-group">
    <label>Email</label>
    <input type="email" className="form-control" id="email" name="email"  placeholder="jane.doe@example.com"/>
  </div>
  <button type="submit" className="btn btn-default">Send invitation</button>
</form>)}});

var CommentBox=React.createClass({
render: function() {
    return (
     <div className="panel panel-default">
       <div className="panel-body">
           <CommentList data={this.props.data}/>
           <CommentForm/>
       </div>
     </div>
    );
  }
});
var data=[
{username:"joker",email:"joker@qq.com"},
{username:"batman",email:"batman@qq.com"}];


ReactDOM.render(<CommentBox data={data}/>,document.getElementById("example"));